<template>
  <div>
    <Row type="flex"
         align="top"
         justify="space-between">
      <Form ref="formSearch"
            class="sellPending"
            inline>
        <FormItem label="场馆"
                  v-if="!userInfo.storeId">
          <Select v-model="storeId"
                  @on-change="expenseHistory"
                  style="width:150px"
                  clearable>
            <Option v-for="(item, index) in storeIdList"
                    :key="index"
                    :value="item.id">{{item.storeName}}</Option>
          </Select>
        </FormItem>
      </Form>
    </Row>
    <Divider>消费总计</Divider>
    <Row :gutter="24"
         type="flex"
         style="position: relative;"
         justify="space-around">
      <i-col :xs="12"
             :md="8"
             :lg="4"
             v-for="(infor, i) in inforCardData"
             :key="`infor-${i}`"
             style="height: 120px;padding-bottom: 10px;">
        <count-to :end="infor.count"
                  count-class="count-style" />
        <p class="text-center">{{ infor.title }}</p>
      </i-col>
      <Spin size="large"
            fix
            v-if="spinShow"></Spin>
    </Row>
    <Divider>消费统计图</Divider>
    <Row>
      <Col span="10">
      <p>周统计</p>
      <div id="myWeek"
           :style="{width: '500px', height: '500px'}"></div>
      </Col>
      <Col span="2">&nbsp
      </Col>
      <Col span="12">
      <p>年统计</p>
      <div id="myMonthBar"
           :style="{width: '500px', height: '500px'}"></div>
      </Col>
    </Row>
  </div>
</template>

<script>
import * as echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/toolbox'
import CountTo from '_c/count-to'
import { expenseHistory, totalWeek, totalYear } from '@/api/expense'
import { storeAll } from '@/api/setting-shop'
import { mapGetters } from 'vuex'
export default {
  name: 'home',
  components: {
    CountTo
  },
  data () {
    return {
      storeId: 0,
      spinShow: false,
      storeIdList: [],
      expense: {},
      inforCardData: [
        { title: '今日', icon: '今日', count: 0, color: '#2d8cf0' },
        { title: '本周', icon: '本周', count: 0, color: '#19be6b' },
        { title: '本月', icon: '本月', count: 0, color: '#ff9900' },
        { title: '季度', icon: '本季度', count: 0, color: '#ed3f14' },
        { title: '年度', icon: '本年', count: 0, color: '#E46CBB' }
      ],
      weekArr: []
    }
  },
  created () {
    this.expenseHistory()
    this.storeId = this.userInfo.storeId
    this.storeAll()
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  mounted () {
    this.myWeek()
    this.myMonthBar()
    this.totalWeek()
    this.totalYear()
  },
  methods: {
    storeAll () { // 场馆列表
      return new Promise((resolve, reject) => {
        storeAll().then(res => {
          this.storeIdList = res.data
          resolve(res.data)
        })
      })
    },
    totalWeek () {
      totalWeek().then(res => {
        this.weekArr = res.data
        this.myWeek(res.data)
      })
    },
    totalYear () {
      totalYear().then(res => {
        let year = []
        const arr = {
          jan: 0,
          feb: 1,
          mar: 2,
          apr: 3,
          may: 4,
          june: 5,
          july: 6,
          aug: 7,
          sept: 8,
          oct: 9,
          nov: 10,
          dece: 11
        }
        for (let i in res.data) {
          year[arr[i]] = res.data[i]
        }
        this.myMonthBar(year)
      })
    },
    expenseHistory () {
      this.spinShow = true
      expenseHistory(this.storeId || 0).then(res => {
        const data = res.data
        this.$set(this.inforCardData[0], 'count', data.today)
        this.$set(this.inforCardData[1], 'count', data.toWeek)
        this.$set(this.inforCardData[2], 'count', data.toMonth)
        this.$set(this.inforCardData[3], 'count', data.toQuarter)
        this.$set(this.inforCardData[4], 'count', data.toYear)
        this.spinShow = false
      })
    },
    myWeek (weekArr) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myWeek'))
      // 绘制图表
      myChart.setOption({
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '0',
          right: '0',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '消费',
            type: 'bar',
            barWidth: '60%',
            data: weekArr
          }
        ]
      })
    },
    myMonthBar (yearArr) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myMonthBar'))
      // 绘制图表
      myChart.setOption({
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '0',
          right: '0',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '消费',
            type: 'bar',
            barWidth: '60%',
            data: yearArr
          }
        ]
      })
    }
  }
}
</script>

<style lang="less">
.count-style {
  font-size: 30px;
}
#myWeek,
#myMonthBar {
  width: 500px;
}
</style>
